<!-- im
-->
<template>
  <div class="im mt-4">

    <div class="w-4/5 flex flex-col gap-y-6">
        <div class="mb-4">配置scm</div>
      <div class="gap-y-2 flex flex-col text-sm"> 
        <div class="text-gray-600 required-visiable-after">SCM应用HOST</div>
        <t-input :disabled="configurationSatus==='Configured'" clearable v-model="host" placeholder="请输入HOST" @clear="host = ''" />
      </div>

      <div class="gap-y-2 flex flex-col text-sm"> 
        <div class="text-gray-600 required-visiable-after">SCM应用PrivateKey</div>
        <t-input :disabled="configurationSatus==='Configured'" clearable v-model="privateKey" placeholder="请输入PrivateKey" @clear="privateKey = ''" />
      </div>

      <div class="flex items-center gap-x-4"> 
        <t-button v-if="configurationSatus!=='Configured'" @click="submit">提交配置</t-button>
        <t-button v-else theme="default" variant="outline" @click="handleModify">更改配置</t-button>
        <t-button v-if="configurationSatus==='Modifing'" theme="default" @click="handleCancelModifing" variant="outline" class="ml-6">取消</t-button>
        <div v-if="configurationSatus==='beforeConifg'" class="text-sm text-gray-600">
          没有SCM应用？ 
          <t-link theme="primary" target="_blank" href=''>
            注册并关联
          </t-link>
        </div>
      </div> 
    </div>
    <!-- <h1>{{ msg }}</h1> -->
  </div>
</template>

<style scoped>
@import './index.css'; 
.required-visiable:before {
  display: inline-block;
  margin-right: var(--td-comp-margin-xs);
  color: var(--td-error-color);
  line-height: var(--td-line-height-body-medium);
  content: "*";
}
.required-visiable-after:after {
  display: inline-block;
  margin-left: var(--td-comp-margin-xs);
  color: var(--td-error-color);
  line-height: var(--td-line-height-body-medium); 
  content: "*";
}

.required-invisiable:before {
  display: inline-block;
  margin-right: var(--td-comp-margin-xs);
  color: var(--td-error-color);
  line-height: var(--td-line-height-body-medium);
  content: "*";
  opacity:0;
}

.title { 
  margin-bottom: 10px;
}
 
</style>

<script>
import { JumpIcon } from 'tdesign-icons-vue';
import SDK from '@opentapd/tapd-open-js-sdk'

export default {
  components: {
    JumpIcon,
  },
  data() {
    return {
      configurationSatus: 'beforeConifg',  //配置前：beforeConfig，配置完成Configured,修改中Modifing
      popConfirmVisible: false,
      host: '',
      privateKey: '',
      msg: 'good'
    };
  },
  async mounted() {
    this.sdk = SDK();
    const entranceData = await this.sdk.context.getEntranceData();
    const authInfo = await this.sdk.handler('config.getAuthInfo');
    this.host = authInfo.host;
    this.privateKey = authInfo.privateKey;
    if(this.host !== '' && this.privateKey !== ''){
      this.configurationSatus = 'Configured';
    }
  },
  methods: {
    handleCancelModifing() {
      this.configurationSatus = 'Configured';
    },
    handleModify() {
      this.configurationSatus = 'Modifing';
    },
    handleClick() {
      this.popConfirmVisible = true;
      this.msg = 'handleClick';
    },
    async submit() {
      this.popConfirmVisible = false;
      this.msg = 'handlesubmit';
      const entranceData = await this.sdk.context.getEntranceData();
      // console.log("context", entranceData)
      // 数据处理，https://open.tapd.cn/document/plugin-doc/learning/yaml/handler.html
      let res = await this.sdk.handler('config.saveAuthInfo', { workspaceId: entranceData.workspaceId,host: this.host, privateKey: this.privateKey });
      // 兼容调用接口异常
      if(res === undefined || res ==='' || res === null){
         res = '系统错误';
      }
      // this.msg = r;
      if(res === '保存成功'){ 
        this.configurationSatus = 'Configured'; 
        this.sdk.ui.alert('配置提交成功！'); 
      } else {
        this.sdk.ui.alert('配置提交失败，'+res); 
      }
      // console.log(res)
    },
    cancel() {
      this.popConfirmVisible = false;
    },
  }
};
</script>
